<template>
  <div class="main">
    <div>
      <router-view></router-view>
    </div>

    <van-tabbar v-model="activei" active-color="#e4393c" inactive-color="#515151" route>
      <van-tabbar-item v-for="(item, index) in product" :key="index" :to="{name: item.routeName}">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activei: 0,
      product: [
        {
          title:'首页',
          routeName: "Home",
          activeIcon:require("../assets/home_active.png"),
          inactiveIcon:require("../assets/home.png")
        },
        {
          title:'头条',
          routeName: "Discover",
          activeIcon:require("../assets/discover_active.png"),
          inactiveIcon:require("../assets/discover.png")
        },
        {
          title:'我的',
          routeName: "My",
          activeIcon:require("../assets/my_active.png"),
          inactiveIcon:require("../assets/my.png")
        }
      ]
    };
  }
};
</script>
